<template>
	<div class="Abnormal">
		<header>
			<i class="iconfont icon-xiangzuo1" @click="goPrev"></i><span>运输任务(司机)</span> 
		</header>
		<div class="query-box">
			<div class="address" style="margin-left: 5px;margin-right: 5px;padding-bottom: 5px;"> 
				<el-input v-model="code" placeholder="请输入配载单号" clearable/>
				<el-button type="primary" style="margin-left: 15px;" @click="getOrderListBtn" >查询</el-button>
			</div>
		</div>
		<div class="form-content" :style="{ height: wrapperHeight + 'px' }" style="overflow:scroll;margin-top: 105px;">
			<mt-loadmore topDropText="下拉刷新" topLoadingText="" topPullText='' bottomPullText="" bottomDropText="上拉加载" bottomLoadingText="" :top-method="loadTop" :bottom-method="loadBottom" ref="loadmore" :autoFill="autoFill">
			<div v-for="(item, index) in orderList" :key="index">
				<div class="orderNo" v-if="!item.orgnizationList[item.orgnizationList.length - 1].tempFieldThree"><span>配载单号:&nbsp; </span>{{ item.code }}</div>
				<div class="orderNo2" v-else><span>配载单号:&nbsp; </span>{{ item.code }}</div>
				<div class="order-box" @click="goOrderListDriverInfo(item)"  :class="{heightline: !item.orgnizationList[item.orgnizationList.length - 1].tempFieldThree}">
					<!-- <div class="order-item">
						<div style="width: 55%"><span>始发地:&nbsp; </span> {{ item.orgnizationList.length ? item.orgnizationList[0].address : '' }}</div>
						<div><span>目的地:&nbsp; </span>{{ item.orgnizationList.length ? item.orgnizationList[item.orgnizationList.length - 1].address : '' }}</div>
					</div> -->
					<div class="order-item"><span>始发地:&nbsp; </span> {{ item.tempFieldThree }}</div>
					<div class="order-item"><span>目的地:&nbsp; </span>{{ item.tempFieldFour }}</div>
					<div class="order-item">
						<div style="width: 55%"><span>司机:&nbsp; </span> {{ item.driverName }}</div>
						<div><span>司机电话:&nbsp; </span>{{ item.mobileNumber }}</div>
					</div>
					<div><span>车牌:&nbsp; </span>{{ item.vehicleCode }}</div>
					<!-- <div class="btn">
						<div class="edit" @click="openClockInModle(item, '确认到达')">确认到达</div>
						<div class="edit" @click="openClockInModle(item, '发车确认')">发车确认</div>
						<div class="edit" @click="openNavigation(item)">导航</div>
					</div> -->
				</div>
			</div>
			<div v-if="allLoaded && orderList.length " class="nodata_label">没有更多数据</div>
			</mt-loadmore>
		</div> 
		<!-- 页面数据为空时 -->
		<div v-if="is_NoData" class="NoData">
			<div>
				<i class="iconfont icon-meiyouwuliuxinxi"></i>
				<div>{{is_NoData_text}}</div>
			</div>
		</div>
		<el-dialog
		:title="type + '打卡'"
		top="15vh"
		:visible.sync="centerDialogVisible"
		:close-on-click-modal="false"
		width="95%"
		center>
		<div style="display: flex;">
			<p style="line-height: 38px;margin-right: 10px;">仓库:</p>
			<el-select v-model="address" placeholder="请选择地址" filterable remote @change="changeAddress">
				<el-option v-for="item in currentItem.orgnizationList" :key="item.address" :label="item.shortName" :value="item.address"></el-option>
			</el-select>
		</div>
		<div class="clockIn" @click="clockIn" v-if="isAllowClockIn">打卡</div>
		<div class="clockIn" v-else style="background-color: #7c747473;">打卡</div>
		<p v-if="!isAllowClockIn" style="font-size: 16px; color: red">提示: 当前位置距离最近仓库超过1000米，不允许打卡。</p>
		<div style="font-size: 14px;">当前定位: {{ $store.state.CurrentLocation }}</div>		
		<div class="uploadImg">
			<v-uploader title=""
				url="/system/shipment/driverClockIn"
				@onErr ="onErr"
				@onSuccess ="onSuccess"
				:limit="1"
				ref="uploadAb"
				:auto-upload="false"
				:file-list="fileList"
				:params="uploadParams"/>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button size="mini" type="primary" @click="onPlusReadyBtn">刷新定位</el-button>
			<el-button size="mini" @click="centerDialogVisible = false" style="margin-left: 30px;">关闭</el-button>
		</span>
		</el-dialog>
		<el-dialog
		title="导航地址选择"
		top="30vh"
		:visible.sync="navigationDialogVisible"
		:close-on-click-modal="false"
		width="80%"
		center>
			<div v-for="(item, index) in navigationList" :key="index">
				<div class="navigation_item">
					<div>{{ item.address }}</div>
					<p  @click="goTonavigation(item)"><i class="el-icon-position"></i></p>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script>
  import pictureSample from '@/components/pictureSample'
  import Header from '@/components/header'
  import Uploader from '@/components/uploader'
	import * as fetchObj from '@/api/index/reportAbnormal'
	import $ from "jquery" 
	import Vue from 'vue';
	import { Toast, Dialog } from 'vant';
	Vue.use(Toast).use(Dialog);
	export default {
		name: 'OrderListDriver',
		components: {
      'v-header': Header,
      'v-uploader': Uploader, // 上传组件
      'pictureSample': pictureSample
		},
		data() {
			return {
				code: '',
				address: '',
      			consignesList: [],
				orderList: [],
				type: '',
				currentItem: {},
				centerDialogVisible: false,
				distanceList: [],
				isAllowClockIn: false,
				orgnizationId: null,
				allLoaded: true, // 上拉刷新还能上拉刷新
				autoFill: false,
				loadPage: 1, // 当前第几页
				wrapperHeight: 0,
				is_NoData: false, // 没有数据模块样式  是否显示
				is_NoData_text: '暂无数据', // 没有数据模块样式  显示的文字
				navigationDialogVisible: false,
				navigationList: [],
				uploadParams: {},
				fileList: []
			}
		},
		watch: { 
		},
		mounted() {
			this.wrapperHeight = document.documentElement.clientHeight - 120
			this.onPlusReady('e') // 获取APP经纬度
		},
		created() {
    		this.getQueryConsignesList()
			this.getOrderList() 
			CallAndroidOrIOS.getImageChooserType('camera');
		},
		methods: { 
			onSuccess(aa) {
				this.centerDialogVisible = false
				this.uploadParams = {}
			},
			onErr() {
			},
			// 下拉刷新
			loadTop() {
				this.loadPage = 1;
				this.allLoaded = false;
				this.getOrderList('TopLoad');
			},
			// 上拉加载
			loadBottom() {
				let that = this;
				if (that.allLoaded) {
					that.$refs.loadmore.onBottomLoaded();
					return;
				} else {
					that.loadPage += 1;
				}
				this.getOrderList('BottomLoad');
			},
			getOrderListBtn () {
				this.loadPage = 1
				this.getOrderList()
			},
			getOrderList (load) {
				let that = this
				const params = {
					currentPage: this.loadPage,
					code: this.code
				}
				this.httpRequest1('post', '/system/shipment/getShipmentListByDriver', params).then((res) => {
					if (load) {
						if (load == 'TopLoad') {
							that.$refs.loadmore.onTopLoaded();
						} else if (load == 'BottomLoad') {
							that.$refs.loadmore.onBottomLoaded();
						}
					}
					//上拉加载后 数据拼接
					if (that.loadPage > 1) {
						that.orderList = that.orderList.concat(res.data.list || [])
					} else {
						that.orderList = res.data.list || [];
						if (that.orderList.length) {
							that.is_NoData = false; // 没有数据模块 是否显示
						} else {
							that.is_NoData_text = '暂无数据'
							that.is_NoData = true;
						}
					}
					// 判断是否能上拉加载
					if (res.data.list && res.data.list.length < 20) {
						that.allLoaded = true;
					} else {
						that.allLoaded = false;
					}
				})
			},
			getQueryConsignesList (address) {
				let that = this
				const params = {
					"address": address
				}
				this.httpRequest1('post', '/system/app/queryConsignesList', params).then((res) => {
					that.consignesList = res.data
				})
			},
			goPrev() {
				this.$router.push({
					name: "Index",
				})
			},
			onPlusReadyBtn() {
				this.onPlusReady('e')
				this.isAllowClockIn = false
				setTimeout(() => {
					this.openClockInModle(this.currentItem, this.type)
				}, 4000)
			},
			openClockInModle (item, type) {
				console.log('计算距离')
				this.type = type
				this.currentItem = item
				this.centerDialogVisible = true
				let orgnizationList = item.orgnizationList
				this.distanceList = []
				if (orgnizationList.length) {
					// 计算距离
					orgnizationList.forEach(ele => {
						let distance = this.getDistances(ele.latitude, ele.longitude, this.$store.state.latitude, this.$store.state.longitude)
						this.distanceList.push({
							distance: distance.m,
							address: ele.address,
							id: ele.id
						})
						this.distanceList.sort(function(a, b){return a.distance - b.distance}) 
					});
				}
				this.address = this.distanceList[0].address
				this.orgnizationId = this.distanceList[0].id
				if (this.distanceList[0].distance < 1200) {
					this.isAllowClockIn = true
				} else {
					this.isAllowClockIn = false
				}
			},
			// 计算两个经纬度直接的距离
			getDistances(lat1, lng1, lat2, lng2) {
				let EARTH_RADIUS = 6378.137;// 地球半径
				let radLat1 = lat1 * Math.PI / 180.0; //lat1 * Math.PI / 180.0=>弧度计算
				let radLat2 = lat2 * Math.PI / 180.0;
				let a = radLat1 - radLat2;
				let b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * EARTH_RADIUS; 
				s = Math.round(s * 10000) / 10000;// 输出为公里
				return { m: s * 1000, km: Number(s.toFixed(2)) }
			},
			// 切换仓库
			changeAddress () {
				let addressObj = this.distanceList.filter(ele => { return ele.address == this.address})[0]
				this.orgnizationId = addressObj.id
				if (addressObj.m < 1200) {
					this.isAllowClockIn = true
				} else {
					this.isAllowClockIn = false
				}
			},
			clockIn () {
				this.uploadParams = {
					type: this.type == '确认到达' ? 'daoKu' : 'liKu',
					shipmentId: this.currentItem.id,
					orgnizationId: this.orgnizationId,
				}
				
				this.$refs.uploadAb.submit(this, this.uploadParams);	
				// this.$refs.uploadAb.submit();
				console.log(this.uploadParams,)
				// this.httpRequest1('post', '/system/shipment/driverClockIn', params).then((res) => {
				// 	if (res.success) {
				// 		that.$message({
				// 			message: '打卡成功',
				// 			type: 'success'
				// 		});
				// 		that.centerDialogVisible = false
				// 	}
				// })
			},
			//点击打开导航地址选择
			openNavigation (item) {
				this.navigationDialogVisible = true
				this.navigationList = item.orgnizationList
			},
			goTonavigation(item) {
				if (!item.longitude || !item.latitude) {
					this.$alert('该地址无经纬度信息，无法导航', '提示', {
						confirmButtonText: '确定'
					})
					return
				}
				let params = {
					longitude: item.longitude, // 经度
					latitude: item.latitude, // 纬度
					cc: '2' // cc=1表示高德，cc=2表示百度，cc=3表示84坐标系
				}
				let that = this
				that.httpRequest1('post','/system/app/locationChangeAddress',params).then(res => {
					if (res.success && res.data.formatted_address) {
						that.Navigate_SelectComit(res.data.formatted_address)
					}
				})
			},
			goOrderListDriverInfo (item) {
				this.$router.push({
         			name: 'OrderListDriverInfo',
					query:{
						orderInfo: item
					}
				})
			}
    	},
  		beforeDestroy () {
  		}
  }
</script>
<style scoped lang="less">
	@import "../../components/publicLess.less";
	.Abnormal {
		font-size: 28/50rem;
	}
	.order-box {
		margin: 5px;
		margin-top: 0;
		border: 1px solid #e1e1e1;
		padding: 5px 10px;
		line-height: 23px;
		.order-item {
			display: flex;
		}
		span {
			color: #6e6b6bbd;
		}
	}
	
	.orderNo {
		margin-left: 5px;
		background: #038EEA;
		width: 60%;
		padding: 5px 10px;
		color: #fff;
	}
	.orderNo2 {
		margin-left: 5px;
		background: #ccc;
		width: 60%;
		padding: 5px 10px;
		color: #fff;
	}
	.query-box {
		background: #fff;
		position: fixed;
		top: 90/50rem;
		width: 100%;
	}
	.btn {
		display: flex;
		justify-content: space-around;
		margin-top: 6px;
		.edit {
			width: 30%;
			background-color: #038EEA;
			color: #fff;
			text-align: center;
			border-radius: 5px;
		}
		.del {
			width: 30%;
			background-color: red;
			color: #fff;
			text-align: center;
			border-radius: 5px;
		}
	}
	/deep/ .el-dialog__header {
		padding: 10px;
	}
	/deep/ .el-dialog--center .el-dialog__body {
		padding: 15px 15px 20px;
		font-size: 16px;
	}
	/deep/ .el-dialog__footer {
		padding-bottom: 10px;
	}
	.footer-btn {
		position: fixed;
		bottom: 20px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-radius: 5px;
		width: 50%;
		background-color: #038EEA;
		color: #fff;
		margin-left: 25%;
	}
	
.address {
  margin-top: 10px;
  display: flex;
  img {
    width: 80/50rem;
		padding: 12/50rem;
		box-sizing: border-box;
		height: 80/50rem;
		line-height: 80/50rem;
  }
  .ok-btn {
    width: 76/50rem;
    height: 76/50rem;
    font-size: 28/50rem;
    line-height: 80/50rem;
    margin: 0 10/50rem;
    text-align: center;
    background-color: #038EEA;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
  }
}
.currentAddress {
  font-size: 28/50rem;
  padding: 20/50rem;
  color: #9b9b9b;
}
/deep/ .el-select-dropdown.el-popper {
  left: 0 !important;
  z-index: 9999;
}
.el-select-dropdown .el-select-dropdown__item {
  white-space: normal;
  line-height: 20px !important;
  height: inherit;
  border-bottom: 1px solid #e1e1e1;
  padding-top: 5px;
  padding-bottom: 5px;
}
.clockIn {
	height: 80px;
	width: 80px;
	background-color: #038EEA;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	border-radius: 50%;
	line-height: 80px;
	text-align: center;
	color: #fff;
	font-size: 20px;
} 
.navigation_item {
	line-height: 40px;
	display: flex;
	border-bottom: 1px solid #eee;
	div {
		width: 80%;
	}
	i {
		color: #038EEA;
	}
}
.heightline {
	border-color: #038EEA
}
</style>